<template>
  <div>
    <div style="border: 1px solid #dcdfe6; padding: 5px; border-radius: 4px">
      <div ref="editor" id="editorList"></div>
    </div>
  </div>
</template>
<script>
import Quill from "quill";
import mention from "quill-mention"; // 引入mention 组件
import "quill-mention/dist/quill.mention.min.css";
export default {
  name: "quillink",
  props: ["AuditDetails"],
  data() {
    return {};
  },
  mounted() {
    // this.AuditDetailsList()
    // console.log(this.AuditDetails.comment_relation_user
    // , "this.AuditDetails")
    this.quillldata();
  },
  methods: {
    AuditDetailsList() {
      if (this.AuditDetails.comment_relation_user) {
        return this.AuditDetails.comment_relation_user.map((item) => {
          return {
            id: item.id,
            value: item.name,
            avatar: item.avatar,
          };
        });
      }
    },
    quillldata() {
      const atValues = this.AuditDetailsList();
      // console.log(atValues, "this.AuditDetails.comment_relation_user")
      new Quill(this.$refs.editor, {
        placeholder: "输入讨论内容，可通过@提醒指定人员",
        modules: {
          mention: {
            // allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/, // 匹配字母搜索
            allowedChars: /^[\u4e00-\u9fa5]*$/, //匹配中文搜索
            mentionDenotationChars: ["@"], // 通过@拉起人员框
            positioningStrategy: "fixed",
            // 人员框渲染内容
            renderItem: (data) => {
              return `
              <div class="member-item">
                  <span class="member-name">${data.value}</span>
              </div>
            `;
            },
            // 加载人员框loading
            renderLoading: () => {
              return "暂无可@的人员";
            },
            source: (searchTerm, renderList, mentionChar) => {
              // 第二种方式：静态数据（方便调试）
              const cloneMemberList = atValues.filter(
                (item) => item.value.indexOf(searchTerm) !== -1
              );
              // renderList 方法，将数据填充到选人框中
              renderList(cloneMemberList);
            },
          },
        },
      });
    },
    preserveComment() {
      let domStr = this.$refs.editor.outerHTML;
      let patt = /<span[^>]+data-id=['"]([^'"]+)['"]+/g;
      let result = [],
        temp;
      while ((temp = patt.exec(domStr)) != null) {
        result.push(temp[1]);
      }
      const text = this.$refs.editor.innerText;
      var dataList = {
        receiver_ids: result.map(Number),
        content: text,
      };
      this.$emit("showCityName", dataList);
      // // console.log(domStr, "=================")
      // // console.log(text, "123132123")
    },
    preserveCommentclear() {
      const element = document.getElementsByClassName("ql-editor")[0];
      element.textContent = "";
    },
  },
};
</script>
<style scoped lang="less">
/deep/ #editorList .ql-clipboard {
  display: none;
}
</style>